import React, { useState, useEffect, FC } from "react";
import { Card, Form, message, Radio, InputNumber, Spin, Button } from "antd";
import Https from "@/utils/Https";
import styles from "./index.less";
import { signList, codeList } from "./interface";
import { Drawer } from "antd/lib";
const RuleClass: FC<any> = (props) => {
  const { open, onClose, courseInfo, onSuccess } = props;
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  let customValue = Form.useWatch((values) => values, form);
  const [formInfo, setFormInfo] = useState({});
  //自主签到时间
  const [SignTimeList, setSignTimeList] = useState(signList);
  //扫码签到时间
  const [codeSigninList, setCodeSigninList] = useState(codeList);
  const getDetails = async (obj) => {
    setLoading(true);
    let res: any = await Https.get("/privateAppointSet/info", obj, true);
    if (res.code == 200 && res.data) {
      setFormInfo(res.data);
      form.setFieldsValue({
        ...res.data,
        appointRule: obj.courseId ? "1" : "0",
      });
      let signObj = [...SignTimeList];
      signObj.forEach((item) => {
        item.disabled = true;
        if (res.data.signinType == item.id) {
          item.disabled = false;
        }
      });
      setSignTimeList(signObj);
      let codeObj = [...codeSigninList];
      codeObj.forEach((item) => {
        item.disabled = true;
        if (res.data.codeSigninType == item.id) {
          item.disabled = false;
        }
      });
      setCodeSigninList(codeObj);
    } else {
      message.error(res.msg);
    }
    setLoading(false);
  };
  //保存规则
  const save = async () => {
    let result = await form.validateFields();
    let params;
    let res;
    setLoading(true);
    if (result.appointRule == "1") {
      params = {
        eusePrivateAppointSet: { ...result },
        appointRule: "1",
        courseId: courseInfo.id,
      };
      res = await Https.post(
        "/privateAppointSet/addOrUpdatePrivateAppointCourseSet",
        params,
        true
      );
    } else {
      params = {
        courseId: courseInfo.id,
        appointRule: 0,
      };
      res = await Https.post("/course/updateAppointRule", params, true);
    }
    setLoading(false);
    if (res.code == 200) {
      message.success("保存成功");
      onSuccess(result.appointRule);
    } else {
      message.error(res.msg);
    }
  };
  useEffect(() => {
    if (courseInfo.id) {
      if (courseInfo.appointRule == "0") {
        getDetails({});
      } else {
        getDetails({ courseId: courseInfo.id });
      }
    }
    form.resetFields();
  }, [courseInfo]);
  return (
    <Drawer
      open={open}
      className={styles.ruleDrawer}
      title="预约规则"
      onClose={() => {
        onClose();
      }}
      footer={
        <>
          <Button
            onClick={() => {
              onClose();
            }}
            size="large"
          >
            取消
          </Button>
          <Button
            size="large"
            type="primary"
            loading={loading}
            onClick={() => {
              save();
            }}
            style={{ marginLeft: "15px" }}
          >
            确定
          </Button>
        </>
      }
      width={"60%"}
    >
      <Spin spinning={loading}>
        <div className={styles.PrivateCourse}>
          <Form form={form} colon={false}>
            <Card
              title=""
              className={styles.noCardName}
              extra={
                <Form.Item label="预约规则" name="appointRule">
                  <Radio.Group
                    onChange={(e) => {
                      let { value } = e.target;
                      if (value == 0) {
                        getDetails({});
                      } else {
                        getDetails({ courseId: courseInfo.id });
                      }
                    }}
                  >
                    <Radio value="0">遵从系统设置</Radio>
                    <Radio value="1">自定义设置</Radio>
                  </Radio.Group>
                </Form.Item>
              }
            ></Card>
            <Card title="预约时间设置">
              <Form.Item label="预约方式" name="groupType">
                <Radio.Group
                  disabled={customValue && customValue.appointRule == "0"}
                >
                  <Radio value="1">不支持会员自主预约</Radio>
                  <Radio value="2">自主预约，不限制预约时间</Radio>
                  <Radio value="3">自主预约，限制预约时间</Radio>
                </Radio.Group>
              </Form.Item>
              {customValue && customValue.groupType == "2" && (
                <Form.Item label="预约截止时间">
                  课程预约人数未满，会员需早于开课前
                  <Form.Item
                    label=""
                    name="groupAppointEndTime"
                    rules={[
                      {
                        required: true,
                        message: "请输入预约时间",
                      },
                    ]}
                  >
                    <InputNumber
                      disabled={customValue && customValue.appointRule == "0"}
                      min={0}
                      precision={0}
                      placeholder="0为不限制"
                      controls={false}
                      suffix={"分钟"}
                    />
                  </Form.Item>
                  进行自主预约
                </Form.Item>
              )}
              {customValue && customValue.groupType == "3" && (
                <>
                  <Form.Item label="预约开始时间">
                    开课前
                    <Form.Item
                      label=""
                      name="groupAppointStartTime"
                      rules={[
                        {
                          required: true,
                          message: "请输入预约时间",
                        },
                      ]}
                    >
                      <InputNumber
                        disabled={customValue && customValue.appointRule == "0"}
                        min={0}
                        precision={0}
                        placeholder="0为不限制"
                        controls={false}
                        suffix={"分钟"}
                      />
                    </Form.Item>
                    开始支持自主预约
                  </Form.Item>
                  <Form.Item label="预约截止时间">
                    课程预约人数未满，会员需早于开课前
                    <Form.Item
                      label=""
                      name="groupAppointEndTime"
                      rules={[
                        {
                          required: true,
                          message: "请输入预约时间",
                        },
                      ]}
                    >
                      <InputNumber
                        disabled={customValue && customValue.appointRule == "0"}
                        min={0}
                        precision={0}
                        placeholder="0为不限制"
                        controls={false}
                        suffix={"分钟"}
                      />
                    </Form.Item>
                    自主预约
                  </Form.Item>
                </>
              )}
            </Card>
            <Card title="签到设置">
              <Form.Item label="自主签到设置" name="selfSigninFlag">
                <Radio.Group
                  disabled={customValue && customValue.appointRule == "0"}
                >
                  <Radio value="0">启用</Radio>
                  <Radio value="1">禁用</Radio>
                </Radio.Group>
              </Form.Item>
              {customValue && customValue.selfSigninFlag == "0" && (
                <Form.Item label="自主签到时间" name="signinType">
                  <Radio.Group
                    disabled={customValue && customValue.appointRule == "0"}
                  >
                    {SignTimeList &&
                      SignTimeList.length > 0 &&
                      SignTimeList.map((item, index) => {
                        return (
                          <div
                            className={`${styles.radioFlex} ${
                              item.disabled ? styles.noError : ""
                            }`}
                            key={item.id}
                          >
                            <Radio
                              value={item.id}
                              onChange={() => {
                                let objList = [...SignTimeList];
                                objList.forEach((item) => {
                                  item.disabled = true;
                                });
                                form.setFieldsValue({ signinValue: "" });
                                objList[index].disabled = false;
                                setSignTimeList(objList);
                              }}
                            >
                              {item.name}
                            </Radio>
                            <Form.Item
                              label=""
                              name="signinValue"
                              rules={[
                                {
                                  required: !item.disabled,
                                  message: `请输入${item.name}时间`,
                                },
                              ]}
                            >
                              <InputNumber
                                min={0}
                                precision={0}
                                controls={false}
                                disabled={
                                  item.disabled ||
                                  (customValue &&
                                    customValue.appointRule == "0")
                                }
                                className={
                                  item.disabled ? styles.hasDisabled : ""
                                }
                                suffix={"分钟"}
                              />
                            </Form.Item>
                            <Form.Item label="">以内，支持签到</Form.Item>
                          </div>
                        );
                      })}
                  </Radio.Group>
                </Form.Item>
              )}
              <Form.Item label="扫码签到设置" name="codeSigninFlag">
                <Radio.Group
                  disabled={customValue && customValue.appointRule == "0"}
                >
                  <Radio value="0">启用</Radio>
                  <Radio value="1">禁用</Radio>
                </Radio.Group>
              </Form.Item>
              {customValue && customValue.codeSigninFlag == "0" && (
                <Form.Item label="扫码签到时间" name="codeSigninType">
                  <Radio.Group
                    disabled={customValue && customValue.appointRule == "0"}
                  >
                    {codeSigninList &&
                      codeSigninList.length > 0 &&
                      codeSigninList.map((item, index) => {
                        return (
                          <div
                            className={`${styles.radioFlex} ${
                              item.disabled ? styles.noError : ""
                            }`}
                            key={item.id}
                          >
                            <Radio
                              value={item.id}
                              onChange={() => {
                                let objList = [...codeSigninList];
                                objList.forEach((item) => {
                                  item.disabled = true;
                                });
                                form.setFieldsValue({ codeSigninValue: "" });
                                objList[index].disabled = false;
                                setCodeSigninList(objList);
                              }}
                            >
                              {item.name}
                            </Radio>
                            <Form.Item
                              label=""
                              name="codeSigninValue"
                              rules={[
                                {
                                  required: !item.disabled,
                                  message: `请输入${item.name}时间`,
                                },
                              ]}
                            >
                              <InputNumber
                                min={0}
                                precision={0}
                                controls={false}
                                disabled={
                                  item.disabled ||
                                  (customValue &&
                                    customValue.appointRule == "0")
                                }
                                suffix={"分钟"}
                                className={
                                  item.disabled ? styles.hasDisabled : ""
                                }
                              />
                            </Form.Item>
                            <Form.Item label="">以内，支持签到</Form.Item>
                          </div>
                        );
                      })}
                  </Radio.Group>
                </Form.Item>
              )}
            </Card>
            <Card title="取消预约设置">
              <Form.Item label="自主取消" name="selfAppointCancelFlag">
                <Radio.Group
                  disabled={customValue && customValue.appointRule == "0"}
                >
                  <Radio value="0">启用</Radio>
                  <Radio value="1">禁用</Radio>
                </Radio.Group>
              </Form.Item>
              {customValue && customValue.selfAppointCancelFlag == "0" && (
                <Form.Item label="取消设置">
                  <Radio
                    checked
                    disabled={customValue && customValue.appointRule == "0"}
                  >
                    开课前
                  </Radio>
                  <Form.Item
                    label=""
                    name="selfAppointCancelBefore"
                    rules={[{ required: true, message: "请输入取消时间" }]}
                  >
                    <InputNumber
                      disabled={customValue && customValue.appointRule == "0"}
                      min={0}
                      precision={0}
                      controls={false}
                      placeholder="请输入"
                      suffix="分钟"
                    />
                  </Form.Item>
                  <Form.Item>支持会员自主取消</Form.Item>
                </Form.Item>
              )}
            </Card>
          </Form>
        </div>
      </Spin>
    </Drawer>
  );
};
export default RuleClass;
